<script setup>
  import {ref} from "vue";
  import SelectTable from "@/views/lims/contractAnalysis/table/selectTable.vue";
  const emit = defineEmits(['update:modelValue', 'onSelected'])
  const props = defineProps(['placeholder', 'title', 'sql', 'columns', 'field', 'order', 'modelValue'])
  const selectTable = ref()
  const handleSelect = () => {
    let data = {columns: props.columns, sql: props.sql}
    console.log('props.order is :::', props.order)
    selectTable.value.selectBySql(props.sql, props.columns, true, props.order)
  }
  const onSelected = (row) => {
    // props.modelValue = row[props.field]
    emit('update:modelValue', row[props.field])
    emit('onSelected', row)
  }
  const valueChange = (val) => {
    emit('update:modelValue', val)
  }
</script>

<template>
  <el-input v-model="props.modelValue" :placeholder="placeholder" @input="valueChange">
    <template #append>
      <el-button icon="Search" @click="handleSelect"></el-button>
    </template>
  </el-input>
  <select-table ref="selectTable" :title="props.title" db-type="sqlserver" source="sql" @ok="onSelected"></select-table>
</template>

<style scoped lang="scss">

</style>